<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.fu{
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			margin: 10px;
		}
		.box{
			width: 300px;
			height: 300px;
			overflow: hidden;
			margin: 5px;
			border: 2px dashed #f1f1f1;
			box-sizing: border-box;
		}
		.box:hover{
			transform: scale(1.2);
			transition: all 0.7s; 
		}
		.box:nth-child(8){
			width: 150px;
			height: 300px;
			overflow: hidden;
		}
		.box:nth-child(9){
			width: 200px;
			height: 200px;
			overflow: hidden;
		}
		.box div{
			width: 100%;
			height: 100%;
			box-sizing: border-box;
		}
		.box:nth-child(1) div{
			border-radius: 150px;
			background-color: red;
		}
		.box:nth-child(2) div{
			border-radius: 150px;
			transform: translateY(50%);
			background-color: green;
		}
		.box:nth-child(3) div{
			border-radius: 150px;
			transform: translateX(50%);
			background-color: pink;
		}
		.box:nth-child(4) div{
			border-radius: 150px;
			transform: translateX(50%)translateY(50%);
			background-color: #9c9c9c;
		}
		.box:nth-child(5) div{
			transform: translateX(50%)translateY(50%);
			border-left:#4d69b8 6px solid;
			border-radius: 150px;
		}
		.box:nth-child(6) div{
			border-radius: 150px;
			border-top:#4d69b8 6px solid;
			transform: translateX(50%)translateY(50%);
		}
		
		
	</style>
	<body>
		<div class="fu">
			<div class="box"><div></div></div>
			<div class="box"><div></div></div>
			<div class="box"><div></div></div>
			<div class="box"><div></div></div>
			<div class="box"><div></div></div>
			<div class="box"><div></div></div>
			
		</div>
	</body>